<template>
  <div  class="app-container">
    <el-form :inline="true" :model="formData">
      <el-form-item label="产品名称">
        <el-select v-model="formData.productName" placeholder="产品名称">
          <el-option v-for="(val,idx) in productNameList" :key="idx" :label="val" :value="val"></el-option>
        </el-select>
    </el-form-item>
      <el-form-item label="产品编号">
      <el-input v-model="formData.productNo" placeholder="请输入产品名称"></el-input>
    </el-form-item>
      <el-form-item label="机器编号">
        <el-input v-model="formData.machineNo" placeholder="请输入机器编号"></el-input>
      </el-form-item>
      <el-form-item label="机器序列号">
        <el-input v-model="formData.machineSerialNumber" placeholder="请输入机器编号"></el-input>
      </el-form-item>
      <el-form-item label="型号">
        <el-select v-model="formData.model" placeholder="机器型号">
          <el-option v-for="(val,idx) in modelList" :key="idx"  :label="val" :value="val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="仓库名称">
        <el-input v-model="formData.warehouseName" placeholder="请输入仓库名称"></el-input>
      </el-form-item>
      <el-form-item label="机器状态">
        <el-select v-model="formData.status" placeholder="机器状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="不可用" value="1"></el-option>
          <el-option label="使用中" value="2"></el-option>
          <el-option label="未激活" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否打印二维码">
        <el-select v-model="formData.codingStatus" placeholder="是否打印二维码">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  @click="btnOk" >查询</el-button>
        <el-button @click="resetOk"  >重置</el-button>
      </el-form-item>
    </el-form>

    <el-card>
      <el-button
        style="margin-bottom:10px"
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
      >导出</el-button>
      <el-table :data="machineList" :border="true" style="width: 100%">
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column prop="productId" label="产品id" align="center" width="80"></el-table-column>
        <el-table-column prop="productNo" label="产品编号" align="center" width="180"></el-table-column>
        <el-table-column prop="productName" label="产品名称" align="center" width="120"></el-table-column>
        <el-table-column prop="machineSerialNumber" label="机器序列号" align="center" width="120"></el-table-column>

        <el-table-column prop="machineNo" label="机器编号" align="center" width="200" ></el-table-column>
        <el-table-column prop="model" label="型号" align="center" width="80"></el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==='0'" >正常</el-tag>
            <el-tag v-if="scope.row.status==='1'"  type="danger">不可用</el-tag>
            <el-tag v-if="scope.row.status==='2'"  type="success">使用中</el-tag>
            <el-tag v-if="scope.row.status==='3'"  type="success">未激活</el-tag>

          </template>
        </el-table-column>
        <el-table-column  label="采购入库时间" align="center" width="100" prop="warehousingTime"></el-table-column>
        <el-table-column prop="warehouseName" label="仓库名称" align="center" width="150"></el-table-column>
        <el-table-column prop="image" label="图片" align="center" width="150">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px" :src="`http://101.132.141.5:8081/${scope.row.image}`">
              <div slot="error" class="image-slot" style="line-height: 50px">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="qrImage" label="二维码" align="center" width="150">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px" :src="`http://101.132.141.5:8081${scope.row.qrImage}`">
              <div slot="error" class="image-slot" style="line-height: 50px">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="codingStatus" label="是否打印二维码" align="center" width="150">
          <template slot-scope="scope" >
            <el-switch
              style="display: block"
              v-model="scope.row.codingStatus"
              active-color="#13ce66"
              inactive-color="#dcdfe6"
              active-text="是"
              inactive-text="否"
              active-value="1"
              inactive-value="0"
              @change="changStatus(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button @click="openProductRecord(scope.row.id)" type="text" size="small">查看详情</el-button>
            <el-button @click="putBtn(scope.row)" type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

    <!--分页-->
      <el-pagination
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.pageNum"
        :page-sizes="[10, 20, 30, 40,50,100,200,]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <!-- 弹框-->
    <el-dialog
      title="机器产品使用记录"
      :visible.sync="isShow"
      width="80%"
      @closed="closehandler">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form :inline="true" :model="baseList" class="demo-form-inline">
            <el-form-item label-width="124px"  label="机器编号">
              <el-input v-model="baseList.machineNo"  :disabled="true"  placeholder="机器编号"></el-input>
            </el-form-item>

            <el-form-item label-width="124px"  label="机器型号">
              <el-input v-model="baseList.model"  :disabled="true"  placeholder="机器型号"></el-input>
            </el-form-item>

            <el-form-item label-width="124px"  label="采购入库时间">
              <el-input :disabled="true" v-model="baseList.warehousingTime"  placeholder="采购入库时间"></el-input>
            </el-form-item>
            <el-form-item label-width="124px"  label="所在仓库">
              <el-input  v-model="baseList.warehouseName"  :disabled="true" placeholder="所在仓库"></el-input>
            </el-form-item>
            <el-form-item label-width="124px" label="状态">
              <el-radio-group :disabled="true" v-model="baseList.status">
                <el-radio :label="'0'">正常</el-radio>
                <el-radio :label="'1'">不可用</el-radio>
                <el-radio :label="'2'">使用中</el-radio>
                <el-radio :label="'3'">未激活</el-radio>

              </el-radio-group>
            </el-form-item>
            <el-form-item label-width="124px" style="display: block" label="二维码图片">
<!--              <image-upload v-model="baseList.qrImage"/>-->
              <div style="width: 200px;height: 200px">
                <el-image :src="`http://101.132.141.5:8081${baseList.qrImage}`"></el-image>

              </div>
            </el-form-item>
            <el-form-item label-width="124px"  label="机器信息">
              <el-input style="width: 500px;min-height: 100px"  v-model="baseList.information" type="textarea"  :disabled="true" placeholder="入库编号"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="入库单" name="second">
          <el-table :border="true" :data="WarehousingRecordList" style="width: 100%">
            <el-table-column align="center"  prop="machineSerialNumber" label="机器序列号"  width="180"></el-table-column>
            <el-table-column align="center"  prop="warehousingTime" label="入库时间" width="180"></el-table-column>
            <el-table-column align="center"  prop="orderNo" label="订单编号" width="180" ></el-table-column>
            <el-table-column align="center"  prop="warehouseName" label="仓库名称" width="180" ></el-table-column>

          </el-table>
        </el-tab-pane>
        <el-tab-pane label="出库单" name="third">
          <el-table :border="true" :data="IssueRecordList" style="width: 100%">
            <el-table-column prop="outboundNo" align="center"  label="出库编号" fixed="left" width="180"></el-table-column>
            <el-table-column prop="orderNo" align="center"  label="订单编号" width="180"></el-table-column>
            <el-table-column prop="sponsorName" align="center"  label="发起人名称" width="180"></el-table-column>
            <el-table-column prop="customerName" align="center"  label="客户名称" width="180"></el-table-column>
            <el-table-column prop="outboundTime" align="center"  label="出库时间" width="180"></el-table-column>
            <el-table-column prop="outboundWarehouseName" align="center"  label="出库仓库名称" width="180"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="租赁销售订单" name="fourth">
          <el-table :border="true" :data="orderRecordList" style="width: 100%">
            <el-table-column label="合同模板" align="center" prop="contractTemplate" />
            <el-table-column label="发起人" align="center" prop="sponsorName" />
            <el-table-column label="业务员" align="center" prop="salesmanName" />
            <el-table-column label="协同人" align="center" prop="collaboratorName" />
            <el-table-column label="信息提供人" align="center" prop="informationProviderName" width="100"/>
            <el-table-column label="发起人所属部门" align="center" prop="sponsorDeptName" width="150" />
            <el-table-column label="订单编号" align="center" width="180px" prop="orderNo" />
            <el-table-column label="订单发起日期" align="center" prop="orderDate" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.orderDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="业务所属公司" align="center" prop="businessCompany" width="100" />
            <el-table-column label="订单类型" align="center" prop="orderType" />
            <el-table-column label="客户名称" align="center" width="150px" prop="customerName" />
            <el-table-column label="客户所属省份" align="center" prop="customerRegion" width="100"/>
            <el-table-column label="项目名称" align="center" prop="projectName" />
            <el-table-column label="项目地区域" align="center" prop="projectArea" width="100"/>
            <el-table-column label="收货地址" align="center" width="250px" prop="address" />
            <el-table-column label="收货人姓名" align="center" prop="consigneeName" width="100"/>
            <el-table-column label="收货人电话" align="center" prop="consigneeTel" width="100"/>
            <el-table-column label="发货仓库" align="center" prop="deliveryWarehouseName" />
            <el-table-column label="辅料说明" align="center" prop="accessoriesInstruction" />
            <el-table-column label="日租金合计" align="center" prop="totalDailyRent" width="100" />
            <el-table-column label="租金合计" align="center" prop="totalRant" />
            <el-table-column label="应收押金" align="center" prop="depositReceivable" />
            <el-table-column label="应收款" align="center" prop="receivables" />
            <el-table-column label="业务费情况" align="center" prop="businessExpenses" width="100"/>
            <el-table-column label="期望到货日期" align="center" prop="expectedArrivalDate" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.expectedArrivalDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>

            <el-table-column label="订单状态" align="center" prop="orderStatus" >
              <template slot-scope="scope">
                <label v-if="scope.row.orderStatus == '1'" >签约</label>
                <label v-if="scope.row.orderStatus == '2'" >执行中</label>
                <label v-if="scope.row.orderStatus == '3'" >完毕</label>
                <label v-if="scope.row.orderStatus == '4'" >终止</label>
              </template>
            </el-table-column>
            <el-table-column label="情况说明" align="center" prop="description" />
            <el-table-column label="出库状态" align="center" prop="deliveryStatus" >
              <template slot-scope="scope">
                <label v-if="scope.row.deliveryStatus == '1'" >待出库</label>
                <label v-if="scope.row.deliveryStatus == '2'" >部分出库</label>
                <label v-if="scope.row.deliveryStatus == '3'" >全部出库</label>
              </template>
            </el-table-column>
            <el-table-column label="已收金额" align="center" prop="receivedAmount" />
            <el-table-column label="未收金额" align="center" prop="unreceivedAmount" />


          </el-table>
        </el-tab-pane>
        <el-tab-pane label="采购入库信息" name="four">
          <el-table :border="true" :data="purchaseReceiptList" style="width: 100%">
            <el-table-column align="center" prop="warehousingNo" label="采购入库编号" fixed="left" width="180"></el-table-column>
            <el-table-column align="center" prop="warehousingTime" label="采购入库时间" ></el-table-column>
            <el-table-column align="center"  label="采购入库仓库"  ></el-table-column>
            <el-table-column align="center"  label="采购责任人"  ></el-table-column>
            <el-table-column align="center"  label="采购订单状态"  ></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
       <span slot="footer" class="dialog-footer">
          <el-button @click="closehandler">取 消</el-button>
          <el-button type="primary" @click="isShow = false">确 定</el-button>
        </span>
    </el-dialog>

<!--    修改弹框-->
    <el-dialog
      title="修改机器"
      :visible.sync="openShow"
      width="50%">

      <el-form  :model="putMachineList" :rules="rules" class="demo-form-inline">
        <el-form-item label-width="120px" label="仓库名称" prop="warehouseName">
          <el-input style="width:200px" v-model="putMachineList.warehouseName"  placeholder="请输入仓库名称"></el-input>
        </el-form-item>
        <el-form-item  label-width="120px" label="图片" prop="image">
          <image-upload v-model="putMachineList.image"/>
        </el-form-item>
        <el-form-item  label-width="120px" label="二维码" prop="image">
          <image-upload v-model="putMachineList.qrImage"/>
        </el-form-item>
        <el-form-item  label-width="120px" label="状态">
          <el-radio-group v-model="putMachineList.status">
            <el-radio :label="'0'">正常</el-radio>
            <el-radio :label="'1'">不可用</el-radio>
            <el-radio :label="'2'">使用中</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item  label-width="120px" label="机器信息">
          <el-input type="textarea" class="textContain" v-html="putMachineList.information" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openShow = false">取 消</el-button>
        <el-button type="primary" @click="detailsBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import  {getMachineListApi,getMachineRecordApi,modifyMachineApi,getorderMachineList} from '@/api/module/machine.js'
import {outOrderinfo} from '@/api/module/out.js'
import  { listProduct} from '@/api/module/product.js'
import {listOrder} from '@/api/module/receiptOrder.js'
import { getDicts } from '@/api/system/dict/data';

export default{
  name:"machine",
  data(){
    return{
      machineList:[],
      activeName:'first',
      productNameList:[],//产品名称
      modelList:[],//类型
      purchaseReceiptList:[],//采购入库信息
      formData:{
        pageSize: 10,
        pageNum:1,
        productName:'',
        model:'',
        machineNo:'',
        warehouseName:'',
        productNo:'',
        machineSerialNumber:''
      },
      total:0,
      isShow:false,//控制弹框
      openShow:false,//控制修改弹窗
      machineRecordList:{
        machineNo:'',
        warehousingTime:'',
        outboundTime:'',
        warehousingNo:'',
        outboundNo:'',
        orderNo:'',
        outboundId:'',
        warehousingId:'',
        orderIdL:'',

      },//机器记录列表
      baseList:{},//机器基本信息
      WarehousingRecordList:[],//入库单记录列表
      orderRecordList:[],//租赁订单记录表
      IssueRecordList:[],
      putMachineList:{
        id:'',
        warehouseId:'',
        warehouseName:'',
        image:'',
        status:'',
        information:''

      },//修改机器的数据列表
      rules:{
        warehouseName:[
          { required: true, message: '请输入仓库名称', trigger: 'blur' },
        ],
      },
      contractTemplateOptions:[],//合同模板
      businessOptions:[],//业务所属公司
      orderTypeOptions:[],

    }
  },

  created() {
    this.getcontentList()
    this.getbusinessOpion()
    this.getorderTypeOptions()
    this.initData()
    this.getProductList()
  },
  methods:{
   async initData(){
     const {rows,total}= await  getMachineListApi(this.formData)
     this.machineList=rows
     this.total=total
    },
    //二维码
    async changStatus(val){
      console.log(val)
      this.putMachineList=val
      await modifyMachineApi(this.putMachineList)
          this.$message.success('操作成功')
      await this.initData()
    },
    //导出产品
    /** 导出按钮操作 */
    handleExport() {
      this.download('/module/machine/export', {
        ...this.queryParams
      }, `customer_${new Date().getTime()}.xlsx`)
    },
    //获取产品名称
   async getProductList(){
    const {rows}= await listProduct({
      pageNum:1,
      pageSize: 100,
    })
     rows.forEach((value,index)=>{
       this.productNameList.push(value.productName)
       value.models.forEach((val,idx)=>{
         this.modelList.push(val.model)
       })
     })
    this.modelList=Array.from(new Set(this.modelList))
   },

    //查询
    btnOk(){
     this.initData()
    },
    //重置
    resetOk(){
      this.formData={
        productName:null,
          model:null,
          machineNo:null,
          warehouseName:null,
        machineSerialNumber:null

      }
      this.initData()
    },
    handleSizeChange(val){
       console.log(`每页 ${val} 条`);
       this.formData.pageSize=val
      this.initData()
    },
    handleCurrentChange(val){
      console.log(`当前页: ${val}`)
      this.formData.pageNum=val
      this.initData()
    },
    // 关闭弹框
    closehandler(){
     this.isShow=false
      this.activeName='first'
    },
    //修改
    putBtn(val){
      console.log(val)
      this.openShow=true
      // this.putMachineList.id=val.id
      // this.putMachineList.warehouseId=val.warehouseId
      this.putMachineList=val
    },
    //修改提交
   async detailsBtn(){

     if(!this.putMachineList.warehouseName){
       this.$message.warning("请输入仓库名称！")
       return false
     }
       await modifyMachineApi(this.putMachineList)
       this.openShow=false
       this.putMachineList={}
       this.initData()
    },
    //弹框显示
   openProductRecord(val){
     this.baseList={}
     this.machineList.forEach((e,index)=>{
       // console.log(e)
       if(e.id===val){
         // console.log(index)
         this.baseList=this.machineList[index]
       }
     })
     this.isShow=true
   },
    // 获取合同模板
    async getcontentList(){
      let res= await getDicts('biz_contract_template')
      this.contractTemplateOptions=res.data
    },
    async getbusinessOpion(){
      let res=await getDicts('biz_business_company')
      this.businessOptions=res.data
    },
    async getorderTypeOptions(){
      let res=await getDicts('biz_order_type')
      this.orderTypeOptions=res.data
    },
    getValue(arr, item) {
      for (var i = 0; i < arr.length; i++) {
        if (item == arr[i].dictValue) {
          return arr[i].dictLabel
        }
      }
    },
    //tab栏
   async handleClick(tab, event) {

      if(tab.index==='1' || tab.index==='4'){
        console.log('入库单')
        const res= await  getorderMachineList({

        machineId:this.baseList.id
      })
        res.rows.forEach(item=>{
          if(!item.outboundNo){
            this.WarehousingRecordList.push(item)
          }
        })

      }else if(tab.index==='2'){
        console.log('出库单')
        const res= await  getMachineRecordApi({
          searchType:tab.index,
          machineId:this.baseList.id
        })
        this.IssueRecordList=res.rows

      }else if(tab.index==='3'){
        console.log('租赁订单单')
        const res= await  getMachineRecordApi({
          searchType:tab.index,
          machineId:this.baseList.id
        })
        res.rows.forEach(item=>{
          item.contractTemplate=this.getValue(this.contractTemplateOptions,item.contractTemplate)
          item.businessCompany=this.getValue(this.businessOptions,item.businessCompany)
          item.orderType=this.getValue(this.orderTypeOptions,item.orderType)
        })
        this.orderRecordList=res.rows
      }

      if(tab.index==='4'){
        console.log('采购入库信息 ')
        this.purchaseReceiptList=[]
        const {rows}=  await  listOrder({
          pageNum:1,
          pageSize: 10000,
        })

      //  循环判断是不是采购入库的入库订单
        rows.forEach((value,index)=>{
          console.log(value)
          //判断入库类型和入库时间
          if(value.receiptType==='2' && value.warehousingTime===this.baseList.warehousingTime ){
            console.log(value)
            // console.log(value.productList)
            //在所有的入库单查找与之匹配的采购入库编号
            this.WarehousingRecordList.forEach((val,idx)=>{
                  if( val.number===value.warehousingNo){
                    console.log('111')
                    // let arr=value.productList
                    // console.log(arr)
                    // 判断入库的产品编号 型号 入库编码是否一样
                    // if(
                    //   arr.productName===this.baseList.productName &&
                    //   arr.model===this.baseList.model &&
                    //   arr.warehousingNo===this.WarehousingRecordList.number
                    // ){
                    //   this.purchaseReceiptList.push(value)
                    //   console.log(this.purchaseReceiptList.push(value))
                    // }
                  }
            })


          }
        })






      }
    }
  }

}

</script>

